<template>
  <div id="app">
    <h1>{{name}}</h1>



<!--    <img src="./assets/logo.png">-->
<!--    <HelloWorld/>-->
<!--    你好啊-->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import {mapState, mapGetters, mapMutations, mapActions}  from "vuex";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async mounted() {
    // console.log(this.$store.state.name)
    console.log(this.name)
    // console.log(this.$store.getters.getMessage)
    console.log(this.getMessage)


    console.log('老的值:' + this.number)
    // this.$store.commit('changeNumber')  // 提交变更

    // this.$store.commit('setNumber', {number: 10})
    // this.setNumber({number: 11})
    // await this.$store.dispatch('setNum', {number: 44})  // 异步提交使用dispatch
    await this.setNum({number: 444444})
    console.log("新的值:" + this.number)

    console.log('获取模块下的name值:', this.$store.state.store2.name)

  },
  // async mounted() {
  //
  // },
  computed: {  // 散列的方式
    ...mapState(['name', 'number']),
    ...mapGetters(['getMessage']),
    // ...mapState({aliasName: 'name'}),  // 使用别名
    // getName() {
    //   return this.$store.state.name  // 推荐在计算属性中使用
    // }
  },
  methods: {
    ...mapMutations(['setNumber']),  // 注意mutation方法一定要放到methods方法中,才能正常使用
    ...mapActions(['setNum']),

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
